<template>
	<view class="recommend bg-color">
		<view class="recommend-item">
			<image class="item-top-img" src="../../static/img/item-1.jpg"></image>
			<view class="item-bottom">
				<image src="../../static/img/item-1-1.jpg" class="item-bottom-img" mode=""></image>
				<image src="../../static/img/item-1-2.jpg" class="item-bottom-img" mode=""></image>
				<image src="../../static/img/item-1-3.jpg" class="item-bottom-img" mode=""></image>
			</view>
		</view>
		
		<view class="recommend-item">
			<image class="item-top-img" src="../../static/img/item-1.jpg"></image>
			<view class="item-bottom">
				<image src="../../static/img/item-1-1.jpg" class="item-bottom-img" mode=""></image>
				<image src="../../static/img/item-1-2.jpg" class="item-bottom-img" mode=""></image>
				<image src="../../static/img/item-1-3.jpg" class="item-bottom-img" mode=""></image>
			</view>
		</view>
		
		<view class="recommend-item">
			<image class="item-top-img" src="../../static/img/item-1.jpg"></image>
			<view class="item-bottom">
				<image src="../../static/img/item-1-1.jpg" class="item-bottom-img" mode=""></image>
				<image src="../../static/img/item-1-2.jpg" class="item-bottom-img" mode=""></image>
				<image src="../../static/img/item-1-3.jpg" class="item-bottom-img" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
	.recommend {
		padding: 20rpx;
	}
	.recommend-item {
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		border: 2rpx solid #CCC;
		overflow: hidden;
		margin: 20px;
	}
	.item-top-img {
		width: 100%;
		height: 300rpx;
	}
	.item-bottom {
		width: 100%;
		height: 240rpx;
	}
	.item-bottom-img {
		width: 33.33333%;
		height: 240rpx;
	}
</style>